<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Add/Delete Usage</title>
    <script src="https://unpkg.com/vue@3.2.4"></script>
    <script src="../../dist/vue-tree.umd.js"></script>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="../../dist/vue-tree.css">
  </head>
  <body>
    <div class="container">
      <h1>Add/Delete Usage</h1>
      <div id="app">
        <tree id="customtree" :initial-model="model" :model-defaults="modelDefaults" ref="tree"></tree>
      </div>
    </div>

    <script type='module'>
      import arModel from './addRemove.js';

      Vue.createApp({
        components: {
          tree: window['vue-tree']
        },
        data() {
          return {
              childCounter: 0,
              model: arModel,
              modelDefaults: {
                  addChildCallback: this.addChildCallback
              }
          };
        },
        methods: {
          addChildCallback (parentModel) {
            this.childCounter++;
            return Promise.resolve({ id: `child-node${this.childCounter}`, label: `Added Child ${this.childCounter}`, treeNodeSpec: { deletable: true } });
          }
        }
      }).mount('#app');
    </script>
  </body>
</html>